<template>
    <div class="tabbar">
        <van-tabbar v-model="active" inactive-color="#8B8C91" @change="myChange">
            <van-tabbar-item v-for="(item,index) in itemList" v-if="index!==2" :key="index" :to="item.url">
                <span :class="{active:index==currIndex}">{{item.title}}</span>
            </van-tabbar-item>
            <van-tabbar-item v-else>
                <img src="~assets/image/add.png" class="add">
            </van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
  export default {
    name: "Tabbar",
    data(){
      return{
        currIndex:0,
        active:0,
        itemList:[
          {title:'首页',url:'/'},
          {title:'西安',url:''},
          {title:'',url:''},
          {title:'消息',url:''},
          {title:'我',url:'/profile'}
        ]
      }
    },
    methods:{
      myChange(index){
        if (index==2){
          return false
        } else{
          this.currIndex = index
        }
      }
    }
  }
</script>

<style scoped>
.van-tabbar{
    height: 120px;
    background-color: rgba(25,27,32,0.1);
    border-top: #8B8C91 solid 0.1px;
}
.van-tabbar-item{
    font-size: 38px;
}
.active{
    font-size: 38px;
    font-weight: bold;
    color: #FFFFFF;
    padding-bottom: 10px;
    border-bottom: 5px solid #fff;
}
.add{
    width: 60px;
}
</style>
